<template>
  <div>
    <el-dialog
      title="我的资源车"
      :visible.sync="dialogVisible"
      width="1000px"
      :lock-scroll="false"
    >
      <div class="download-list" style="min-height: 400px">
        <el-table :data="tableData" stripe style="width: 100%" size="mini">
          <el-table-column
            prop="oldName"
            label="资源名称"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.sysAttachment.oldName }}
            </template>
          </el-table-column>
          <el-table-column prop="attrSize" label="资源大小" width="100">
            <template slot-scope="scope">
              {{ scope.row.sysAttachment.attrSize | fileSizeFilter }}
            </template>
          </el-table-column>
          <el-table-column prop="attrSuffixStr" label="资源类型" width="100">
            <template slot-scope="scope">
              {{ scope.row.sysAttachment.attrSuffixStr }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="140">
          </el-table-column>
          <el-table-column label="操作" width="140">
            <template slot-scope="{ row }">
              <el-button-group>
                <el-button type="success" size="mini" @click="handleLook(row)">
                  预览
                </el-button>
                <el-button type="danger" size="mini" @click="handleDelete(row)">
                  移除
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          v-show="parseInt(pageObj.count) > 0"
          :total="parseInt(pageObj.count)"
          @change="getList"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="warning"
          :disabled="tableData.length == 0"
          @click="handleDeleteAll()"
          >清空资源车</el-button
        >
        <el-button
          type="primary"
          :disabled="tableData.length == 0"
          @click="handleDownload()"
          >下载</el-button
        >
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <CarAnimate />
    <Preview />
  </div>
</template>
<script>
import {
  sysResourceCarQuery,
  sysResourceCarAdd,
  sysResourceCarDelete,
  sysResourceCarDeleteAll,
} from '@/api/home/sysResourceCar.js'
import Bus from '@/utils/bus.js'
export default {
  components: {
    CarAnimate: () => import('../shoppingCar/carAnimate.vue'),
    Preview: () => import('../resource/preview.vue'),
  },
  data() {
    return {
      title: '新增',
      dialogVisible: false,
      fileCount: 0,
      form: {
        fileId: '',
      },
      listQuery: {
        page: 1,
        limit: 10,
      },
      tableData: [],
      pageObj: {},
    }
  },
  mounted() {
    this.getList()
    Bus.$on('showDialogCarList', (v) => {
      this.fileCount = 0
      if (v) {
        this.fileCount = v.length
        this.form.fileId = v.map((v) => v.fileId).toString()
        this.add()
      } else {
        this.dialogVisible = true
      }
    })
  },
  beforeDestroy() {
    Bus.$off('showDialogCarList')
  },
  methods: {
    getList() {
      //判断是否登录
      if (!this.$store.getters.userId) return
      sysResourceCarQuery(this.listQuery).then((res) => {
        this.tableData = res.data.data
        this.pageObj = res.data
        this.$emit('e-count', res.data.count)
      })
    },
    add() {
      sysResourceCarAdd(this.form).then((res) => {
        this.getList()
        let data = res.data.data
        if (this.fileCount == data.length) {
          // 文件全部存在
          this.$message.error('文件已存在，请勿重复添加')
          return
        }
        // 资源车动画
        Bus.$emit('carAnimate')
        if (data.length) {
          // 文件部分存在
          let fileName = data.map((v) => v.oldName).toString()
          this.$message({
            message: '资源车加入成功，文件：' + fileName + '已存在',
            type: 'warning',
          })
        } else {
          // 文件没有重复
          this.$message({
            message: '资源车加入成功',
            type: 'success',
          })
        }
      })
    },
    handleLook(row) {
      Bus.$emit('showPreview', row.sysAttachment)
    },
    //移除确认
    handleDelete(row) {
      this.$confirm('确定要移除吗?', '提示', {
        confirmButtonText: '移除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delete(row)
        })
        .catch(() => {})
    },
    //移除
    delete(row) {
      sysResourceCarDelete(row.id).then((res) => {
        this.getList()
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    //移除确认
    handleDeleteAll() {
      this.$confirm('确定要清空资源车吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteAll()
        })
        .catch(() => {})
    },
    //清空资源车
    deleteAll() {
      sysResourceCarDeleteAll().then((res) => {
        this.getList()
      })
    },
    //下载
    handleDownload() {
      Bus.$emit('showDialogDownload', this.tableData)
    },
  },
}
</script>